<!--
 * @Date: 2020-02-25 15:22:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-04-30 18:05:14
 * @describe: --
 -->
<template>
  <el-dialog :visible.sync="visible" title="房间列表" :modal="false" width="60%">
    <!-- <span
            class="colorBoxMain lih33"
            v-for="(item,index) in roomState"
            :key="index"
        >
            <span class="colorBox" :style="'background:'+item.color"></span>
            {{item.type}}
    </span>-->
    <span class="colorBoxMain lih33">
      <span class="colorBox enteredOFF"></span>可录入
    </span>
    <span class="colorBoxMain lih33">
      <span class="colorBox entered"></span>已录入
    </span>
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%;"
      :max-height="tableHeight"
      class="roomTable"
      v-loading="loading"
      :header-cell-style="headerCellStyle"
    >
      <el-table-column prop="storeyCoordinate" label="楼层" width="120" fixed align="center">
        <template slot="header" slot-scope="storeyCoordinate">楼层</template>
        <template slot-scope="scope">{{scope.row.storeyCoordinate +'层'}}</template>
      </el-table-column>
      <el-table-column prop="dictMajorFJDTOS">
        <template slot="header" slot-scope="dictMajorFJDTOS">房间</template>
        <template slot-scope="scope">
          <div
            v-for="(item,index) in scope.row.dictMajorFJDTOS"
            :key="item.id"
            :style="roomStyle(item)"
            class="roombox"
          >
            <div
              :style="roomStyle2(item)"
              class="roombox_t"
              @dblclick="roomInformation(item)"
            >{{item.num}}</div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      visible: false,
      // getDYFJListID: "", //单元ID
      tableHeight: 600,
      loading: false,
      tableTitleDY: "",
      tableData: [],
      roomState: [
        {
          color: "#199696",
          type: "出租",
          dictValue: "1"
        },
        {
          color: "#F45C23",
          type: "出售",
          dictValue: "2"
        }
      ]
    };
  },
  props: ["getDYFJListID", "transactionType"],
  created() {},
  mounted() {},
  methods: {
    //获取单元房间列表
    getDYFJList(val) {
      let _this = this;
      _this.loading = true;
      _this.tableData = [];
      this.$http
        .get(`/dictionary/dictmajorfj/houseList`, {
          params: {
            id: val,
            transactionType: _this.transactionType
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.tableData = res.data;
          // for (let i = 0; i < _this.tableData.length; i++) {
          //     let tiem = _this.tableData[i].dictMajorFJDTOS;
          //     for (let s = 0; s < tiem.length; s++) {
          //         _this.$set(tiem[s], "SelectedState", false);
          //     }
          // }
          _this.loading = false;
        })
        .catch(() => {});
    },
    headerCellStyle() {
      return {
        textAlign: "center"
      };
    },
    //房间宽度
    roomStyle(item) {
      let w = 55;
      if (item.merge == true) {
        w = item.roomNum * 55 + (item.roomNum - 1) * 20;
      }
      return {
        width: w + "px"
      };
    },

    //房间内块状态
    roomStyle2(item) {
      let cor = "";
      if (item.transactionType == null) {
        cor = "#93ff93";
      } else {
        cor = "#ff9390";
      }
      return {
        backgroundColor: cor
      };
    },
    //选中房间
    roomInformation(item) {
      if (item.transactionType == null) {
        this.$emit("returnFJid", item);
        this.visible = false;
      } else {
        return;
      }
    }
  },
  activated() {},
  watch: {
    getDYFJListID: {
      handler: function(val) {
        this.getDYFJList(val);
      }
    }
  }
};
</script>
<style scoped lang="scss">
.colorBoxMain {
  padding: 5px 6px;
}
.colorBox {
  display: inline-block;
  width: 24px;
  height: 14px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}
.roomTable {
  margin-top: 10px;
}
.roombox {
  max-height: 45px;
  float: left;
  margin-right: 20px;
  text-align: center;
  margin-top: 5px;
}

.roombox_t {
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
.enteredOFF {
  background: #93ff93;
}
.entered {
  background: #ff9390;
}
</style>